<template>
    <div class="role-group">
        <div class="group-title">
            <div class="group-title-name">
                {{ datas.title }} 
                <span :class="shrink?'':'group-shrink'" @click="shrink=!shrink"><i class="iconfont el-gzt-caret-down"></i></span>
            </div>
          <div class="group-tool">
            <el-link 
                v-for="(item,index) in btns"
                :icon="item.icon" 
                :type="item.type" 
                :key="index" 
                @click="item.func&&typeof item.func=='function'?item.func(datas,item,index):$emit('btnClick',datas,item,index)">
                {{ item.name }}
            </el-link>
          </div>
        </div>
        <div class="group-list">
            <collapse-transition>
                <slot v-if="!shrink" :data="datas.data"></slot>
            </collapse-transition>
        </div>
    </div>
</template>
<script>
import 'element-ui/lib/theme-chalk/base.css'
import CollapseTransition from 'element-ui/lib/transitions/collapse-transition'
export default {
    name:'TfCollapse',
    props:{
        datas:Object,
        btns:Array,
    },
    components:{
        CollapseTransition
    },
    data(){
        return {
            shrink:true    
        }
    },
    created(){
        this.datas.show?this.shrink = this.datas.show : ''
    }
}
</script>
<style lang="stylus" scoped>
.role-group
    margin-bottom 20px
    .group-title
        display flex
        justify-content space-between
        padding 15px 10px
        border 1px solid #ebeef5
        line-height 1rem
        margin-bottom -1px
        box-sizing border-box
        .group-title-name
            color #303133
            font-size 1rem
            span
                cursor pointer
                display inline-block
                transform rotate(-90deg)
                transition .3s
            .group-shrink
                transform rotate(0deg)
        .group-tool
            .el-link
                margin-right 10px
    .group-list
        // height inherit
        // transition all 3s ease-in-out

</style>